﻿<template id="single_editor_template">
    <div class="page-editor" ref="editorRef"></div>
</template>
<script type="text/javascript">
    var single_editor = {
        template: "#single_editor_template",
        data() {
            return {
                randomId: null,
                editor: null,
                isReady: false
            }
        },
        props: ['modelValue', 'width', 'height', 'manual'],
        methods: {
            init() {
                var rd = Math.random().toString(16).substring(2);
                var el = $('<div class="page-editor-el" />');
                this.randomId = `page-editor-${rd}`;
                el.attr("id", this.randomId);
                el.appendTo(this.$refs.editorRef);
                if (!this.manual) { this.create(); }
            },
            create() {
                var that = this;
                that.editor = UE.getEditor(that.randomId, {
                    snapscreenHost: "127.0.0.1",
                    imageCompressEnable: false,
                    compressSide: 1,
                    catchRemoteImageEnable: !0,
                    catchFieldName: "imgurl",
                    toolbars: that.toolbars || [
                        ["source", "|", "undo", "redo", "|", "fontfamily", "fontsize", "|", "blockquote", "horizontal", "removeformat", "formatmatch", "link", "unlink", "|", "insertvideo", "music", "insertimage", "drafts"],
                        ["bold", "italic", "underline", "forecolor", "backcolor", "|", "justifyleft", "justifycenter", "justifyright", "|", "rowspacingtop", "rowspacingbottom", "lineheight", "|", "insertorderedlist", "insertunorderedlist", "|", "imagenone", "imageleft", "imageright", "imagecenter"]
                    ],
                    labelMap: { anchor: "", undo: "" },
                    //默认的编辑区域宽度
                    initialFrameWidth: that.width || "100%",
                    //默认的编辑区域高度
                    initialFrameHeight: that.height || 400,
                    //开启滚动条
                    scaleEnabled: true,
                    //关闭字数统计
                    wordCount: false,
                    //关闭elementPath
                    elementPathEnabled: false
                });
                that.editor.addListener("ready", that.ready);
                that.editor.addListener("contentChange", that.change);
            },
            change() {
                this.$emit("update:modelValue", this.editor.getContent());
            },
            setContent(value) {
                this.editor.setContent(value);
            },
            ready() {
                this.setContent(this.modelValue); this.isReady = true;
            },
            destroy() {
                if (this.editor) { this.editor.destroy(); }
            }
        },
        mounted() { this.init(); },
        unmounted() { this.destroy(); }
    };
</script>